<template>
  <div class="bind-accounts">
    <el-card class="box-card">
      <h2>绑定登录账号</h2>
      <el-row class="account-item" v-for="account in accounts" :key="account.name">
        <el-col :span="4">
          <img :src="account.icon" :alt="account.name" class="account-icon" />
        </el-col>
        <el-col :span="12">
          <span class="account-name">{{ account.name }}</span>
        </el-col>
        <el-col :span="8" class="action-buttons">
          <el-button type="text" @click="bindAccount(account.name)">绑定</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      accounts: [
        {
          name: "微信",
          icon: "https://img.icons8.com/color/48/000000/weixin.png", // 微信图标
        },
        {
          name: "QQ",
          icon: "https://img.icons8.com/color/48/000000/qq.png", // QQ图标
        },
      ],
    };
  },
  methods: {
    bindAccount(accountName) {
      alert(`绑定${accountName}功能待实现！`);
    },
  },
};
</script>

<style scoped>
.bind-accounts {
  padding: 20px;
}

.box-card {
  width: 600px;
  margin: 0 auto;
}

.account-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.account-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.account-name {
  font-size: 16px;
  font-weight: bold;
}

.action-buttons {
  text-align: right;
}
</style>
